<template>
	<div class="root">
		<div class="container">
			<div class="title">
				题库包含<span class="name" v-for="(item,index) in question_kind">{{item.name}} <span v-if="index!==question_kind.length-1">丶</span> </span>等内容，准备好了就快来进行答题吧！
			</div>
			<div class="logo">
				<!-- <img src="http://qnkf.laigl.com/mobilepng/back2.png" alt=""> -->
				<img src="http://qnkf.laigl.com/20210420/quetionlogo.png" alt="">
				<img src="http://qnkf.laigl.com/mobilepng/back1.png" alt="">
			</div>
			<div class="btns">
				<button class="sub-button" @click="goNext">
				  开始答题
				</button>
			</div>
		</div>
		<footer-comp></footer-comp>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				question_kind:[
					{
							"id": 6,
							"name": "运动机制和原理",
							"cover": "admin/20190922/ef18b3faa36b23d17fa7d7509b12b206.png"
					},
					{
							"id": 7,
							"name": "水的原则",
							"cover": "admin/20190922/ef18b3faa36b23d17fa7d7509b12b206.png"
					},
					{
							"id": 8,
							"name": "水中康复治疗原则/方法",
							"cover": ""
					},
					{
							"id": 9,
							"name": "专业职责",
							"cover": ""
					},
					{
							"id": 10,
							"name": "安全与风险意识",
							"cover": ""
					}
				]
			}
		},
		methods:{
			goNext(){
				this.$router.push('./exam')
			}
		}
	}
</script>

<style scoped lang="less">
	.root{
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: url(http://qnkf.laigl.com/mobilepng/questionback.png);
		.container{
			overflow: hidden;
			height: 100%;
			.btns{
				.sub-button{
					width: 90vw;
					position: fixed;
					bottom: 15vh;
					left: 5vw;
					height: 3.8rem;
					background: linear-gradient(to right, #20d9df, #0383C4);
					border: none;
					outline: none;
					border-radius: 3rem;
					color: #fff;
					font-size: 1.3rem;
				}
			}
			.title{
				box-sizing: border-box;
				width: 23rem;
				height: 5rem;
				margin: 2rem;
				font-size: 1rem;
				color: #ccc;
				line-height: 1.5rem;
				.name{
					color: #000;
				}
			}
			.logo{
				width: 100%;
				img:nth-child(1){
					display: block;
					width: 80%;
					height: 50%;
					margin-left: 2rem;
				}
				img:nth-child(2){
					width: 100%;
					height: 100%;
					margin-top: 1.5rem;
				}
			}
		}
	}
</style>
